<template>
  <!--人才详情-->
  <view>
    <baseHead title="人才详情" bg="#ffffff" color="#000000"></baseHead>
    <view class="content2" v-if="objectData">
      <view class="banner_item">
        <view class="item-li">
          <view class="li-left">
            <view class="top-img">
              <u-avatar
                class="img"
                :src="URL + objectData.Avatar"
                shape="square"
                :default-url="src"
              ></u-avatar>
            </view>
            <view class="bottom-text">{{
              objectData.CurrentRole == 0 ? "职场人" : "学生"
            }}</view>
          </view>
          <view class="li-right">
            <view class="position">
              <view class="position-left">
                {{ objectData.Name }}
              </view>
            </view>
            <view class="information">
              <span>{{ objectData.Sex == 1 ? "男" : "女" }}</span
              ><span>丨</span> <span>{{ objectData.Age + "岁" }}</span
              ><span>丨</span>
              <span v-if="objectData.EducationLevelStr">{{
                objectData.EducationLevelStr
              }}</span
              ><span v-if="objectData.EducationLevelStr">丨</span>
              <span>{{ objectData.WorkYear + "年经验" }}</span
              ><span>丨</span>
              <span>{{ objectData.CurrentStatusStr }}</span>
            </view>
            <view class="text">
              <view style="font-size: 24rpx" v-if="objectData.Email">
                <span>邮箱：</span><span>{{ objectData.Email }}</span>
              </view>

              <view style="font-size: 24rpx" v-if="objectData.Address">
                <span>现居地址：</span><span>{{ objectData.Address }}</span>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="title">求职意向</view>
      <view
        class="job-intention"
        :class="index > 0 ? 'intention-acvive' : ''"
        v-for="(item, index) in objectData.JobExpectList"
        :key="index"
      >
        <view class="intention">
          <view class="intention-top">
            <view>{{ item.PositionName }}</view>
            <view
              >{{
                item.Negotiable
                  ? "面议"
                  : formatNumber(item.MinWage) +
                    "-" +
                    formatNumber(item.MaxWage)
              }}
            </view>
            <view style="margin-left: -80rpx">{{ item.WorkTypeStr }}</view>
            <view style="margin-left: -100rpx">{{ item.PcaAddress }}</view>
          </view>
          <view class="intention-bottom">
            <view
              class="bottom-li"
              v-for="(item, index) in item.IndustryList"
              :key="index"
              >{{ item.Name }}
            </view>
          </view>
        </view>
      </view>
      <view class="title" v-if="objectData.GoodAt">自我介绍</view>
      <view class="self-introduction">
        <view class="introduction">
          {{ objectData.GoodAt }}
        </view>

        <view
          class="left-company"
          v-if="objectData.GoodAtImages !== '' && objectData.GoodAtImages"
        >
          <image
            v-for="(ite, ind) in imgList(objectData.GoodAtImages.split(','))"
            :key="ind"
            class="logo"
            :src="ite"
            mode="aspectFill"
            @click="
              previewImage(ind, imgList(objectData.GoodAtImages.split(',')))
            "
          >
          </image>
          <view
            class="videoClass"
            @click="show = true"
            v-if="objectData.GoodAtVideo"
          >
            <image
              class="imageClass"
              src="https://cdn.uviewui.com/uview/album/1.jpg"
            ></image>
            <image
              class="top-img"
              src="/static/static/images/video-file.png"
            ></image>
          </view>
        </view>
        <u-popup :show="show" mode="center" @close="show = false" @open="open">
          <view class="videoClass">
            <video
              width="1"
              objectFit="cover"
              height="1"
              controls
              loop="loop"
              id="myVideo"
              :src="URL + objectData.GoodAtVideo"
            ></video>
          </view>
        </u-popup>
      </view>
      <view class="title" v-if="objectData.WorkExps.length !== 0"
        >工作/实习经历</view
      >
      <view class="work-experience" v-if="objectData.WorkExps.length !== 0">
        <view
          class="cont-title"
          v-for="(item, index) in objectData.WorkExps"
          :key="index"
        >
          <view class="cont">
            <span class="cont-left">{{ item.CompanyName }}</span>
            <span class="cont-right">
              {{
                "（" +
                dateFormat(item.StartDate) +
                "-" +
                dateFormat(item.EndDate) +
                "）"
              }}
            </span>
          </view>
          <view class="cont">
            <span class="cont-text">{{ item.PositionName }}</span>
            <span class="cont-right">{{ "（" + item.Wage + "元/月）" }}</span>
          </view>
          <view class="cont">
            <span class="cont-text">职位类别：</span>
            <span class="cont-right">{{ item.PositionName }}</span>
          </view>
          <view class="cont">
            <view class="cont-text" style="white-space: pre-wrap"
              ><span class="xiao-title">工作内容：</span
              >{{ item.WorkContent }}</view
            >
          </view>
          <view class="cont1" v-if="item.Emphasis !== '' && item.Emphasis">
            <view
              class="cont1-li"
              v-for="(ite, index) in item.Emphasis.split(',')"
              :key="index"
              >{{ ite }}
            </view>
          </view>
        </view>
      </view>
      <view class="title" v-if="objectData.EducationExps.length !== 0"
        >教育经历</view
      >
      <view class="educatio">
        <view
          class="educatio-ul"
          v-for="(item, index) in objectData.EducationExps"
          :key="index"
        >
          <view class="educatio-li">
            <view class="dic">
              {{ item.SchoolName }}
            </view>
            <view class="dic" style="">
              {{
                "（" +
                dateFormat(item.StartDate) +
                "-" +
                dateFormat(item.EndDate) +
                "）"
              }}
            </view>
          </view>
          <view class="educatio-li">
            <view class="dic right">
              {{ item.EduDegreeStr }}
            </view>
            <view class="dic">
              {{ item.Major }}
            </view>
          </view>
        </view>
      </view>
      <view class="title" v-if="objectData.ProjectExps.length !== 0"
        >项目经历</view
      >
      <view class="project">
        <view
          class="project-ul"
          v-for="(item, index) in objectData.ProjectExps"
          :key="index"
        >
          <view class="project-li">
            <span class="li-left">{{ item.ProjectName }}</span>
            <span class="li-right">{{
              "（" +
              dateFormat(item.StartDate) +
              "-" +
              dateFormat(item.EndDate) +
              "）"
            }}</span>
          </view>
          <view class="project-li">
            <span class="li-left">担任角色：</span>
            <span class="li-left">{{ item.RoleName }}</span>
          </view>
          <view class="project-li">
            <view class="li-right">项目描述：{{ item.Content }}</view>
          </view>
        </view>
      </view>
      <view class="title" v-if="objectData.TrainExps.length !== 0"
        >培训经历</view
      >
      <view class="project">
        <view
          class="project-ul"
          v-for="(item, index) in objectData.TrainExps"
          :key="index"
        >
          <view class="project-li">
            <span class="li-left">{{ item.CompanyName }}</span>
            <span class="li-right">{{
              "（" +
              dateFormat(item.StartDate) +
              "-" +
              dateFormat(item.EndDate) +
              "）"
            }}</span>
          </view>
          <view class="project-li">
            <span class="li-right">课程内容：{{ item.CourseName }}</span>
          </view>
        </view>
      </view>
      <view class="title" v-if="objectData.LangSkills.length !== 0"
        >语言能力</view
      >
      <view class="language">
        <view
          class="language-ul"
          v-for="(item, index) in objectData.LangSkills"
          :key="index"
        >
          <view class="language-li">
            {{ item.Lang }}
          </view>
          <view class="language-li"> 听写能力：{{ item.LsLevelStr }} </view>
          <view class="language-li"> 读写能力：{{ item.RwLevelStr }} </view>
        </view>
      </view>
      <view class="title" v-if="objectData.ProSkills.length !== 0"
        >专业技能</view
      >
      <view class="language">
        <view
          class="language-ul"
          v-for="(item, index) in objectData.ProSkills"
          :key="index"
        >
          <view class="language-li">
            {{ item.Title }}
          </view>
          <view class="language-li">
            {{ item.Level }}
          </view>
          <view class="language-li">
            <span>使用时长：</span>
            <span>{{ item.UseTime + "个月" }}</span>
          </view>
        </view>
      </view>
      <view class="title" v-if="objectData.Certificates.length !== 0"
        >获得证书</view
      >
      <view class="language">
        <view
          class="language-ul"
          v-for="(item, index) in objectData.Certificates"
          :key="index"
        >
          <view class="language-li">
            {{ item.Name }}
          </view>
          <view class="language-li">
            <span>获得时间：</span>
            <span>{{ dateFormat(item.Date, true) }}</span>
          </view>
        </view>
      </view>
      <!-- <view class="title">个人作品(2/10)</view>	
			<view class="works">
				<view class="works-ul">
					<view class="works-li">
						xxx项目首页效果图
					</view>
					<view class="works-li">
						<span>作品链接：</span>
						<span class="lj">https://image.baidu.com/search/detai</span>
					</view>
					<view class="works-li">
						<span>作品附件：</span>
						<span class="lj">xxx.PDF</span>
					</view>
				</view>
			</view> -->

      <view class="" style="height: 130rpx"></view>

      <view class="bottom_bar fl-lr-c">
        <view class="but1 fl-lr-c" @click="Interested()">
          <image
            v-if="objectData.IsCollect"
            src="/static/recruit/gxq1.png"
            mode="aspectFill"
          ></image>
          <image
            v-else
            src="/static/recruit/gxq2.png"
            mode="aspectFill"
          ></image>
          感兴趣
        </view>
        <view class="but2 fl-c" @click="clickinterted()">打招呼</view>
      </view>

      <!-- <u-popup :show="chooseShow" mode="center" @close="chooseShow = false, chooseId = null" @open="chooseOpen">
				<view class="choose-title">
					选择职位
				</view>
				<view class="choose-content">
					<view class="choose-ul">
						<view class="choose-li" v-for="(item, index) in posData" :key="index"
							:class="chooseIndex == index ? 'active' : ''" @click="chooseClick(item, index)">
							<view class="li-name">
								{{item.JobName}}
							</view>
							<view class="li-mayo">
								{{formatNumber(item.MinWage) + '-' + formatNumber(item.MaxWage)}}
							</view>
							<view class="li-yaoqiu">
								{{item.PcaAddress + '/' + item.EducationCn + '/' + item.Experience + '经验'}}
							</view>
						</view>
			
					</view>
				</view>
				<view class="bottom-right">
					<u-button type="primary" text="取消" @click="chooseShow = false, chooseId = null" plain
						style="margin-right: 30rpx;"></u-button>
					<u-button type="primary" :disabled="chooseId == null" text="确定" @click="determine">
					</u-button>
				</view>
			</u-popup> -->
    </view>
  </view>
</template>

<script>
import baseHead from "@/pages/component/baseHead.vue";
import config from "@/common/api/config.js";
const app = getApp();
export default {
  data() {
    return {
      f_id: 0,
      fabuzhe_id: 0,
      zwData: "",
      userData: "",

      URL: this.$config.domain.staticUrl,

      detail: "",
      objectData: "",
      src: "/static/static/images/avatar1_100.png",

      show: false,
      postId: null,
      posData: null,
      chooseShow: false,
      chooseIndex: null,
      chooseId: null,
    };
  },
  onLoad(o) {
    this.detail = JSON.parse(decodeURIComponent(o.key));
    if (o.id) {
      this.postId = JSON.parse(decodeURIComponent(o.id));
    }
    console.log(o, "0000000000000");
    this.getdata();
  },
  components: {
    baseHead,
  },
  computed: {
    clear() {
      return;
    },
  },
  onShow() {},
  // 初次渲染
  onReady() {},
  watch: {},
  onReachBottom() {},
  methods: {
    getdata() {
      // console.log(this.detail)
      this.$http.huirc.talentPoolResumeid(this.detail).then((res) => {
        if (res.Success) {
          this.objectData = res.Result;
          this.collection(res.Result.ResumeId);
        } else {
          console.log(res);
        }
      });
    },
    collection(val) {
      let obj = {
        Id: val,
      };
      // console.log(obj)
      this.$http.huirc.collectionLook(obj).then((res) => {
        if (res.Success) {
        } else {
          console.log(res);
        }
      });
    },

    // 数字转K
    formatNumber(num) {
      // return num >= 1e3 && num < 1e4 ? (num / 1e3).toFixed(0) + 'k' : num >= 1e4 ? (num / 1e4).toFixed(1) + 'w' : num
      return num >= 1e3 ? (num / 1e3).toFixed(0) + "k" : num;
    },
    dateFormat(time, r) {
      let date = new Date(time);
      let year = date.getFullYear();
      // 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
      let month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      let hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      let minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      let seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      // 拼接
      // return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
      if (r) {
        return year + "." + month + "." + day;
      } else {
        return year + "." + month;
      }
    },
    imgList(val) {
      return val.map((res) => {
        return `${this.URL}${res}`;
      });
    },
    previewImage(index, item) {
      console.log(item);
      uni.previewImage({
        current: index,
        urls: item,
      });
    },
    open() {},
    Interested() {
      if (this.objectData.IsCollect) {
        let obj = {
          JobExpectId: [this.objectData.JobExpectId],
        };
        this.$http.huirc.collectionDel(obj).then((res) => {
          if (res.Success) {
            console.log(res.Result);
            // this.$util.toast(res.Message)
            this.getdata();
          } else {
            this.$util.toast("取消失败");
            console.log(res);
          }
        });
      } else {
        let obj = {
          JobExpectId: [this.objectData.JobExpectId],
        };
        this.$http.huirc.collectionAdd(obj).then((res) => {
          if (res.Success) {
            console.log(res.Result);
            // this.$util.toast(res.Message)
            this.getdata();
          } else {
            this.$util.toast("感兴趣失败");
            console.log(res);
          }
        });
      }
    },
    clickinterted() {
      console.log(this.objectData);
      console.log(this.postId);
      if (this.postId) {
        let obj = {
          UserId: this.objectData.UserId,
          JobId: this.postId,
          HasChat: 1,
          Applyway: 2,
        };
        console.log(obj, this.objectData, "111111111111");
        this.$http.huirc.jobUserRecordup(obj).then((res) => {
          if (res.Success) {
            // 招聘者-求职 C2C{UserId}
            let id = "C2C" + this.objectData.UserId;
            const url = `/pages/views/packageE/type-recruit/TUI-Chat/chat?conversationID=${id}`;
            uni.navigateTo({
              url: url,
            });
          }
        });
      }
    },
    // getPosData() {
    // 	this.$http.huirc.talentPoolPosition({
    // 		AuditStatus: 1,
    // 		Display: 0
    // 	}).then(res => {
    // 		if (res.Success) {
    // 			this.posData = res.Result.Items
    // 			this.chooseShow = true
    // 			console.log(this.posData,'55555555555555555555555555')
    // 		} else {
    // 			console.log(res)
    // 		}
    // 	})
    // },
    // chooseOpen() {
    // 	this.chooseShow = true
    // },
    // chooseClick(item, index) {
    // 	console.log(item.Id, index)
    // 	this.chooseId = item.Id
    // 	this.chooseIndex = index
    // },
    // determine() {
    // 	this.postId = this.chooseId
    // 	this.chooseShow = false
    // 	this.clickinterted()
    // }
  },
};
</script>

<style lang="scss" scoped>
.content2 {
  width: 100%;
  padding-bottom: constant(safe-area-inset-bottom);
  /* 兼容 iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom);
  /* 兼容 iOS >= 11.2 */
  box-sizing: border-box;
  margin-top: 20rpx;
  background: #ffffff;
  padding: 30rpx 20rpx;
  // margin-bottom: 20rpx;

  .banner_item {
    height: 100%;
    width: 100%;
    // border-radius: 20rpx;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;

    .item-li {
      // padding: 20rpx 30rpx;
      display: flex;
      justify-content: left;
      background-color: #fff;

      .li-left {
        .top-img {
          position: relative;

          /deep/.img {
            width: 108rpx !important;
            height: 108rpx !important;
            border-radius: 10rpx !important;

            .u-avatar__image {
              width: 100% !important;
              height: 100% !important;
            }
          }
        }

        .bottom-text {
          width: 108rpx;
          height: 42rpx;
          font-size: 24rpx;
          background: #ffffff;
          color: #666666;
          border-radius: 4rpx 4rpx 4rpx 4rpx;
          opacity: 1;
          border: 1rpx solid #e9e9e9;
          line-height: 42rpx;
          text-align: center;
          margin-top: 24rpx;
        }
      }

      .li-right {
        flex: 1;
        margin-left: 20rpx;

        .position {
          display: flex;
          justify-content: left;
          height: 45rpx;

          .position-left {
            font-size: 32rpx;
            font-weight: 400;
            color: #000000;
            line-height: 45rpx;
          }
        }

        .information {
          height: 33rpx;
          margin: 20rpx 0 25rpx;
          font-size: 26rpx;
          font-weight: 400;
          color: #313131;
          line-height: 33rpx;
        }

        .text {
          min-height: 75rpx;
          font-size: 24rpx;
          font-weight: 400;
          color: #000000;
          line-height: 34rpx;
          display: flex;
          flex-direction: column;
          justify-content: left;
          flex-wrap: wrap;
        }
      }
    }
  }

  .title {
    height: 40rpx;
    font-size: 30rpx;
    font-weight: bold;
    color: #000000;
    line-height: 40rpx;
    text-indent: 0.5em;
    position: relative;
    margin-top: 30rpx;

    &::before {
      content: "";
      position: absolute;
      width: 6rpx;
      height: 50%;
      left: 0;
      top: 50%;
      transform: translate(0, -50%);
      background-color: #0199fe;
    }
  }

  .intention-acvive {
    margin-top: 20rpx;
  }

  .job-intention {
    .intention {
      margin-top: 10rpx;

      .intention-top {
        height: 38rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #000000;
        line-height: 38rpx;
        display: flex;
        flex-wrap: nowrap;

        view {
          flex: 1;
        }
      }

      .intention-bottom {
        margin-top: 10rpx;
        display: flex;
        justify-content: left;
        flex-wrap: wrap;

        .bottom-li {
          // min-width: 130rpx;
          height: 50rpx;
          line-height: 50rpx;
          background: #f7f7f7;
          border-radius: 4rpx 4rpx 4rpx 4rpx;
          text-align: center;
          font-size: 26rpx;
          font-weight: 400;
          color: #666666;
          margin-right: 20rpx;
          padding: 0 30rpx;
        }
      }
    }
  }

  .self-introduction {
    .introduction {
      font-size: 28rpx;
      font-weight: 400;
      color: #313131;
      line-height: 34rpx;
      text-align: justify;
      white-space: pre-line;
      margin-top: 10rpx;
    }

    .left-company {
      margin-top: 20rpx;

      display: flex;
      flex-wrap: wrap;
      justify-content: left;

      .logo {
        width: 24%;
        height: 160rpx;
        flex-shrink: 0;
        border-radius: 15rpx;
        margin-right: 1%;
      }

      .videoClass {
        width: 24%;
        height: 160rpx;
        flex-shrink: 0;
        position: relative;
        border-radius: 15rpx;

        .imageClass {
          width: 100%;
          height: 100%;
          border-radius: 15rpx;
        }

        .top-img {
          width: 60rpx;
          height: 60rpx;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }
  }

  .work-experience {
    .cont-title {
      display: flex;
      flex-direction: column;
      justify-content: left;
      margin-top: 10rpx;
      margin-bottom: 30rpx;

      .cont {
        .cont-left {
          font-size: 28rpx;
          font-weight: bold;
          color: #000000;
        }

        .cont-right {
          // margin-left: 10rpx;
          font-size: 28rpx;
          font-weight: 400;
          color: #000000;
        }

        .cont-text {
          font-size: 28rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #000000;
          text-align: justify !important;

          .xiao-title {
            display: inline-block;
            margin: 0;
          }
        }
      }

      .cont1 {
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
        margin-top: 15rpx;

        .cont1-li {
          // width: 130rpx;
          height: 50rpx;
          line-height: 50rpx;
          text-align: center;
          background: #f7f7f7;
          border-radius: 4rpx;
          opacity: 1;
          font-size: 26rpx;
          font-weight: 400;
          color: #666666;
          margin: 10rpx;
          padding: 0 30rpx;
        }
      }
    }
  }

  .educatio {
    .educatio-ul {
      display: flex;
      // flex-wrap: wrap;
      flex-direction: column;
      justify-content: left;
      margin-top: 10rpx;

      .educatio-li {
        // margin-right: 68rpx;
        display: flex;
        justify-content: left;

        .dic {
          font-size: 28rpx;
          font-weight: 400;
          color: #000000;
        }

        .right {
          margin-right: 20rpx;
        }
      }
    }
  }

  .project {
    .project-ul {
      margin-top: 20rpx;

      .project-li {
        margin-top: 6rpx;

        .li-left {
          font-size: 28rpx;
          font-weight: bold;
          color: #000000;
        }

        .li-right {
          font-size: 28rpx;
          font-weight: 400;
          color: #000000;
          text-align: justify !important;
          white-space: pre-wrap;
          // text-justify: distribute-all-lines;
          // text-align-last: justify;
        }
      }
    }
  }

  .training {
  }

  .language {
    margin-top: 16rpx;

    .language-ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: left;

      .language-li {
        font-size: 28rpx;
        font-weight: 400;
        color: #000000;
        margin-right: 68rpx;
      }
    }
  }

  .works {
    margin-top: 16rpx;

    .works-ul {
      margin-top: 10rpx;

      .works-li {
        height: 41rpx;
        line-height: 41rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #000000;

        .lj {
          color: #019afe;
        }
      }
    }
  }

  .bottom_bar {
    width: 100%;
    display: flex;
    padding: 20rpx 40rpx;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;

    .but1 {
      background: #ffffff;
      border: 1rpx solid #1684fc;
      border-radius: 10rpx;
      width: 210rpx;
      height: 88rpx;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #1684fc;
      padding: 26rpx;
      box-sizing: border-box;

      image {
        width: 36rpx;
        height: 36rpx;
      }
    }

    .but2 {
      width: 450rpx;
      height: 88rpx;
      background: #1684fc;
      border-radius: 10rpx;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
    }
  }

  .u-popup__content {
    width: 90%;

    .choose-title {
      text-align: center;
      height: 40rpx;
      font-size: 38rpx;
      font-weight: bold;
      color: #000000;
      line-height: 40rpx;
      margin-top: 30rpx;
    }

    .choose-content {
      padding: 0 30rpx;
      margin: 30rpx 0;
      height: 500rpx;
      overflow-y: auto;

      .choose-ul {
        // width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .choose-li {
          width: 40%;
          // height: 100rpx;
          padding: 15rpx;
          border: 1px solid #eef0f3;
          margin-bottom: 20rpx;

          .li-name {
            font-size: 38rpx;
            font-weight: bold;
            color: #000000;
          }

          .li-mayo {
            font-size: 28rpx;
            font-weight: 400;
            color: #000000;
            margin-top: 10rpx;
          }

          .li-yaoqiu {
            font-size: 26rpx;
            font-weight: 400;
            color: #666666;
            margin-top: 10rpx;
          }
        }

        .active {
          border-color: #338fff !important;
        }
      }
    }

    .bottom-right {
      margin-bottom: 20rpx;
      display: flex;

      .u-button {
        width: 150rpx;
      }
    }
  }
}
</style>